<template>
  <div class="asset_mod" :class="themeClass">
    <div class="asset_mod_box">
      <v-loading v-if="loading" />
      <div class="asset_mod_box_tab" :class="themeClass">
        <van-tabs type="card" color="#DAAB51" v-model="active" @click="getAssetsList(active)">
          <van-tab :title="$t('Asset.Capital account')"></van-tab>
          <!-- 隐藏 -->
          <!-- <van-tab :title="$t('Asset.transaction account')"></van-tab> -->
        </van-tabs>
      </div>

      <div class="asset_mod_box_card" :class="themeClass">
        <div class="asset_mod_box_card_content" :class="themeClass1">
          <div class="asset_mod_box_card_content_money">
            <div class="asset_mod_box_card_content_money_assets">
              <p>{{ $t('Asset.assets') }}（USDT）</p>
              <h1>≈{{ (+userMoney).toFixed(8) }}</h1>
            </div>
          </div>
          <div class="asset_mod_box_card_content_business">
            <div class="asset_mod_box_card_content_business_common deposit" @click="jumpRouter('/asset/deposit')">
              <img src="@/assets/img/Card1@2x.png" alt="" />
              <p>{{ $t('Asset.Recharge') }}</p>
            </div>
            <div class="asset_mod_box_card_content_business_common withdraw" @click="jumpRouter('/asset/withdraw')">
              <img src="@/assets/img/Card2@2x.png" alt="" />
              <p>{{ $t('Asset.withdraw') }}</p>
            </div>
            <div class="asset_mod_box_card_content_business_common deposit" @click="jumpRouter('/mine/transaction')">
              <img src="@/assets/img/List@2x.png" alt="" />
              <p>{{ $t('Home.bill') }}</p>
            </div>
            <div class="asset_mod_box_card_content_business_common withdraw" @click="jumpRouter('/asset/exchange')">
              <img src="@/assets/img/Card3@2x.png" alt="" />
              <p>{{ $t('Home.convert') }}</p>
            </div>
            <!-- 隐藏 -->
            <!-- <div class="asset_mod_box_card_content_business_common exchange" @click="jumpRouter('/asset/huazhuan')">
              <img src="@/assets/img/Card3@2x.png" alt="" />
              <p>{{ $t('Asset.transfer') }}</p>
            </div> -->
          </div>
        </div>
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
        <div class="asset_mod_box_list">
          <div v-for="(item, index) in assetsList" :key="index" class="asset_mod_box_list_data" :class="themeClass1">
            <div class="asset_mod_box_list_data_title">
              <img :src="item.logo_link" alt="" />
              <span :class="bgColor">{{ item.currency }}</span>
            </div>
            <div class="asset_mod_box_list_data_content">
              <div class="asset_mod_box_list_data_content_demo">
                <div>
                  <p :class="bgColor">{{ $t('Asset.Available') }}</p>
                  <p :class="bgColor">（{{ item.currency }}）</p>
                </div>
                <p :class="bgColor">{{ item.money > 0 ? (+item.money).toFixed(8) : '0.00' }}</p>
              </div>
              <div class="asset_mod_box_list_data_content_demo">
                <div>
                  <p :class="bgColor">{{ $t('Asset.In progress') }}</p>
                  <p :class="bgColor">（{{ item.currency }}）</p>
                </div>
                <p :class="bgColor">{{ item.frozen > 0 ? (+item.frozen).toFixed(8) : '0.00' }}</p>
              </div>
              <div class="asset_mod_box_list_data_content_demo">
                <div>
                  <p :class="bgColor">{{ $t('Asset.Convert') }}</p>
                  <p :class="bgColor">（USDT）</p>
                </div>
                <p :class="bgColor">{{ item.discount_amount > 0 ? '≈' + (+item.discount_amount).toFixed(8) : '0.00' }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
export default {
  name: 'asset',
  data() {
    return {
      active: 0,
      assetsList: [],
      isDayTime: false,
      loading: false,
      refreshing: false
    }
  },
  computed: {
    userMoney() {
      var all_money = 0
      for (const key in this.assetsList) {
        all_money += parseFloat(this.assetsList[key]['discount_amount'])
      }
      return all_money
    },
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.getAssetsList(this.active)
  },
  methods: {
    async getAssetsList(type) {
      this.loading = true
      await this.$https.get('/wallet/assetList?type=' + type).then(res => {
        if (res != undefined && res.code == 1) {
          this.assetsList = res.data
          this.refreshing = false
        }
      })
      this.loading = false
    },
    jumpRouter(router) {
      this.$router.push(router)
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.getAssetsList(this.active)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
